<template>
  <div>
    <!-- 1.拆分组件 -->
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 列表 -->
    <v-list @willUpdate="willUpdate" :list="list" @init="init"></v-list>
    <!-- 弹框 -->
    <!-- 2.5传递status给form  -->
    <v-form :status="status" @init="init" :list="list" ref="form"></v-form>

    <!-- 分页组件 
      layout="prev, pager, next" ：prev上一页 pager页码 next 下一页
      total表示总条目数，
      page-size用于设置每页显示的页码数量
      background：是否加背景
      current-change:页码发生了改变的事件，参数就是新的页码
      -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      background
      :page-size="size"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>
<script>
import { requsercount, requserlist } from "../../http/api";
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
export default {
  components: {
    vList,
    vForm,
  },
  props: [],
  data() {
    return {
      //初始值
      status: {
        isshow: false,
        isAdd: true,
      },
      //初始值
      list: [],
      //分页数据
      total: 0, //总数
      size: 2, //每页个数
      page: 1, //当前页码
    };
  },
  methods: {
    //点击了添加
    willAdd() {
      this.status = {
        isshow: true,
        isAdd: true,
      };
    },
    //点击了编辑
    willUpdate(uid) {
      this.status = {
        isshow: true,
        isAdd: false,
      };
      //让form的getOne(id)
      this.$refs.form.getOne(uid);
    }, 
    //8.2获取管理员总数量
    getTotal() {
      requsercount().then((res) => {
        if (res.data.code == 200) {
          this.total = res.data.list[0].total;
        }
      });
    },
    //获取列表
    getList() {
      //8.3
      requserlist({ page: this.page, size: this.size }).then((res) => {
        if (res.data.code == 200) {
          //后端如果没有数据，返回的是null，但是el-table的data要数组，所以如果是null，转为[]
          let arr = res.data.list ? res.data.list : [];
          //删除最后一页的最后一条数据，如果不是第一页的话，需要展示上一页的数据
          if (arr.length == 0 && this.page != 1) {
            this.page--;
            this.getList();
            return;
          }
          this.list = arr;
        }
      });
    },
    init() {
      //请列表+请总数
      this.getList();
      this.getTotal();
    },
    //修改了页码
    changePage(page) {
      //先修改page
      this.page = page;
      //再根据新的page发请求
      this.getList();
    },
  },
  mounted() {
    //发起列表请求
    this.init();
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
</style>